<template>
  <div class="palyer">
    <NormalPlayerVue :totalTime="totalTime" :currentTime="currentTime"></NormalPlayerVue>
    <MiniPlayerVue ></MiniPlayerVue>
    <ListPlayerVue ></ListPlayerVue>
    <audio :src="currentSong.url" ref="audio" @timeupdate="timeupdate" @ended="end"></audio>
  </div>
</template>

<script>
import ListPlayerVue from '../components/Player/ListPlayer.vue'
import MiniPlayerVue from '../components/Player/MiniPlayer.vue'
import NormalPlayerVue from '../components/Player/NormalPlayer.vue'
import mode from '../store/modeType'
import { mapGetters,mapActions } from 'vuex'
import { getRandomIntInclusive } from '../tools/tools'
export default {
  name: 'Player',
  data() {
    return {
      // isShow:false
      totalTime:0,
      currentTime:0
    }
  },
  computed:{
    ...mapGetters([
      'currentSong',
      'isPlaying',
      'currentIndex',
      'curTime',
      'modeType',
      'songs',
      'favoriteList',
      'historyList'
    ])
  },  
  methods: {
    ...mapActions([
      'setCurrentIndex',
      'setFavoriteList',
      'setHistorySong',
      'setHistoryList'
    ]),
    // showList(){
    //   this.isShow = !this.isShow
    // },
    // shut(){
    //   this.isShow = !this.isShow
    // }
    timeupdate(e){
      // console.log(e.target.currentTime);
      this.currentTime = e.target.currentTime
    },
    // 播放结束后根据当前播放模式做出对应的操作
    end(){
      // console.log("end");
      if(this.modeType === mode.loop){
        // console.log("111");
        this.setCurrentIndex(this.currentIndex + 1)
      }else if(this.modeType === mode.one){
        this.$refs.audio.play()
      }else if(this.modeType === mode.random){
        // 范围是0到歌曲的最后一首
        this.setCurrentIndex(getRandomIntInclusive(0,this.songs.length - 1))
      }
    }
  },
  watch:{
    // 点击播放按钮的播放跟暂停
    isPlaying(newValue,oldValue){
      if(newValue){
        this.setHistorySong(this.currentSong)
        this.$refs.audio.play()
      }else{
        this.$refs.audio.pause()
      }
    },
    // 监听歌曲变化来确定是否播放 如果是播放状态下切换则是播放，暂停则暂停
    currentIndex(){
      /*
      注意点：在IOS中系统不会自动加载歌曲，所以oncanplay不会自动执行
              在PC端和Android端，系统会自动加载歌曲，所以oncanplay会自动被执行
      解决方案：如何监听IOS中Audio的歌曲是否已经准备好了，通过ondurationchange事件来监听
                ondurationchange事件什么时候执行：当歌曲加载完毕之后执行，因为只有歌曲加载完成之后才能获取歌曲的总时长
      * */
      this.$refs.audio.ondurationchange = () => {
        this.totalTime = this.$refs.audio.duration
        if(this.isPlaying){
        this.setHistorySong(this.currentSong)
          this.$refs.audio.play()
        }else{
          this.$refs.audio.pause()
        }
      }
    },
    // 让当前播放时间变成点击后的进度条对应的时间
    curTime(newValue,oldValue){
      if(newValue){
        this.$refs.audio.currentTime = newValue
      }
    },
    // 监听收藏歌曲数组的变化，存储到本地
    favoriteList(newValue,oldValue){
      if(newValue){
        // 将收藏的歌曲存储到本地
        window.localStorage.setItem("favoriteList",JSON.stringify(newValue))
      }
    },
    // 监听历史播放歌曲存到本地
    historyList(newValue,oldValue){
      if(newValue){
        // console.log(newValue);
        window.localStorage.setItem("historyList",JSON.stringify(newValue))
      }
    }
  },
  created() {
    // 取出本地存储的收藏歌曲赋值给favoriteList
    let favoriteList = JSON.parse(window.localStorage.getItem('favoriteList'))
    if(favoriteList === null){
      return
    }else{
      this.setFavoriteList(favoriteList)
    }
    let historyList = JSON.parse(window.localStorage.getItem('historyList'))
    if(historyList === null){
      return
    }else{
      this.setHistoryList(historyList)
    }
  },
  mounted() {
    this.$refs.audio.ondurationchange = () => {
      this.totalTime = this.$refs.audio.duration
    }
  },
  components:{
    NormalPlayerVue,
    MiniPlayerVue,
    ListPlayerVue
  }
}
</script>
<style scoped lang="scss">

</style>
